<template>
  <div class="app-container">
    <el-dialog :title="targetTitle" width="400px" :visible.sync="showVipDialog" @close="finishUserOp">
      赠送用户VIP天数
       <el-form>
      <el-form-item label="会员天数" style="margin-bottom: 10px;">
          &nbsp;<el-input-number v-model="giveVipCount" :min="-1000" :max="1000" label="会员天数"></el-input-number>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVipDialog = false">取 消</el-button>
        <el-button type="primary" @click="setVipHandler">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="targetTitle" width="400px" :visible.sync="showTeaDialog" @close="finishUserOp">
      <!-- <span>赠送用户{{ targetName }}1年的VIP?</span> -->
      <div style="margin-bottom:10px; color:red;">
        <label>* 设定茶叶数量, 正数为添加, 负数为减少 *</label>
      </div>
      <el-form>
      <el-form-item label="茶叶数量" style="margin-bottom: 10px;">
          &nbsp;<el-input-number v-model="giveTeaCount" :min="-1000" :max="1000" label="茶叶数量"></el-input-number>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTeaDialog = false">取 消</el-button>
        <el-button type="primary" @click="giveTeaHandler">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查询表单 -->
    <div>
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-select v-model="searchType">
            <el-option v-for="item in stypeOptions" :key="item.value" :label="item.label" :value="item.value">{{item.label}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="searchName" placeholder="关键字"></el-input>
        </el-form-item>
         <el-form-item label="">
          <el-input v-model="searchIp" placeholder="ip搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReload">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" size="small" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='ID' width="120px" fixed>
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="200px" align="center">
        <template slot-scope="scope">
          <svg-icon icon-class="vip" v-if="scope.row.vip == 1" class="vip-icon"/>&nbsp;{{scope.row.nickname}}
        </template>
      </el-table-column>
      <el-table-column label="头像" width="60px" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="40px" height="40px" style="border:1px solid #8AC2FF; border-radius: 3px;" />
        </template>
      </el-table-column>
      <el-table-column label="余额" width="200px" align="center">
        <template slot-scope="scope">
          {{scope.row.balance}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="性别" width="50px" align="center">
        <template slot-scope="scope">
          {{scope.row.gender}}
        </template>
      </el-table-column> -->
      <el-table-column label="手机号" width="150px" align="center">
        <template slot-scope="scope">
          <a title="跳转手机号属地查询" target="_blank" style="color:#467dd0;" href="https://www.ip138.com/sj/"> {{scope.row.phone}}</a>
        </template>
      </el-table-column>
      <el-table-column label="最近登录IP" width="150px" align="center">
        <template slot-scope="scope">
          <a title="跳转ip属地查询" target="_blank" style="color:#467dd0;" href="https://www.ip138.com/"> {{scope.row.lastIp}}</a>
        </template>
      </el-table-column>
      <el-table-column label="场景值" width="100px" align="center">
        <template slot-scope="scope">
          <a title="点击查看场景值列表" target="_blank" style="color:#467dd0;" href="https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html">{{scope.row.register_scene}}</a>
        </template>
      </el-table-column>
      <el-table-column label="文档助手" width="80px" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.has_doc"><svg-icon class="uDoc"></svg-icon></span>
          <span v-else> - </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">{{ scope.row.status_name }}</el-tag>
          <el-tag type="danger" v-else>{{ scope.row.status_name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="剩余解锁时间" width="120px" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.unlock_last_day > 0">{{scope.row.unlock_last_day}}&nbsp;天</el-tag>
          <el-tag type="danger" v-else>0&nbsp;天</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="登录时间" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.login_time}}
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.create_time}}
        </template>
      </el-table-column>
      <el-table-column label="操作时间" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.update_time}}
        </template>
      </el-table-column>
      <el-table-column label="订阅主题数" width="120px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="showSubThemes(scope.row.id)">{{ scope.row.sub_theme_count }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="unionid" width="260px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.unionid != ''">{{scope.row.unionid}}</el-tag>
          <el-tag v-else>暂未获取</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <span>
            <el-dropdown size="small" split-button type="primary" @command="userOpHandler">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="scope.row.cmd_vip">赠送VIP</el-dropdown-item>
              <el-dropdown-item :command="scope.row.cmd_tea">赠送|扣除茶叶</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status == 1" :command="scope.row.cmd_black">封号</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status == 0" :command="scope.row.cmd_black">解封</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:20px;">
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :pager-count="pageItemCount"
      layout="prev, pager, next"
      :total="pageAllCount">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, setStatus, setVip, giveTea } from '@/api/user'

export default {
  data() {
    return {
      showTeaDialog: false,
      showVipDialog: false,
      giveTeaCount: 0,
      giveVipCount:0,
      targetId: 0,
      targetTitle: '',
      pageSize: 10,
      pageItemCount: 0,
      currentPage: 1,
      searchName: '',
      searchIp: '',
      pageAllCount: 100,
      list: null,
      listQuery: { page: 1 },
      listLoading: true,
      searchType: "0",
      stypeOptions: [
        {
          value: '0',
          label: '昵称'
        },
        {
          value: '1',
          label: 'id'
        }
      ]
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.listQuery['stype'] = this.searchType
      this.listQuery['page'] = this.currentPage
      this.listQuery['name'] = this.searchName
      this.listQuery['searchIp'] = this.searchIp
      getList(this.listQuery).then(res => {
        this.list = res.items
        this.pageItemCount = this.list.length
        this.pageSize = res.page_size
        this.pageAllCount = res.total
        this.listLoading = false
      })
    },
    onReload() {
      this.fetchData()
    },
    userOpHandler(command) {
      // this.listLoading = true
      const cmdInfo = command.split(':')
      switch (cmdInfo[0]) {
        case 'vip':
          this.targetId = cmdInfo[1]
          this.targetTitle = '是否赠送用户 "'+cmdInfo[2]+'" VIP'
          // this.targetName = cmdInfo[2]
          this.showVipDialog = true
          break
        case 'tea':
          this.targetId = cmdInfo[1]
          this.targetTitle = '是否赠送用户 "'+cmdInfo[2]+'" 茶叶'
          // this.targetName = cmdInfo[2]
          this.giveTeaCount = 0
          this.showTeaDialog = true
          break
        case 'black':
          this.targetId = cmdInfo[1]
          this.blackHandler()
          break
        default:
          console.log('no law command')
      }
      // this.listLoading = false
    },
    setVipHandler() {
      setVip(this.targetId, this.giveVipCount).then(res => {
        this.$message('赠送VIP成功')
      })
    },
    giveTeaHandler() {
      console.log('give uid:' + this.targetId + ", tea:" + this.giveTeaCount);
      giveTea(this.targetId, this.giveTeaCount).then(res => {
        this.$message('id:' + this.targetId+'的用户, 当前余额为:'+res.balance)
      })
    },
    finishUserOp() {
      this.targetId = 0
      this.fetchData()
    },
    blackHandler() {
      setStatus(this.targetId).then(response => {
        this.fetchData()
      })
    },
    handleCurrentChange(page) {
      // 修改当前页
      this.currentPage = page
      this.fetchData()
    },
    // 显示订阅的时间
    showSubThemes(uid) {
      this.$router.push({path: 'user_theme?uid='+uid})
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .vip-icon {
    color:orange;
    font-size:16px;
  }
</style>


